@radius: 8rpx;
.g-container{
  box-sizing: border-box;
}
.g-main{
 height: 0;
 display: flex;
 flex-direction: column;
 .list-wrap{
  flex: 1;
  height: 0;
  overflow: auto;
  padding: 26rpx;
  .li-wrap{
   border: 1rpx solid #bbbbbb;
   background: #ffffff;
   margin-bottom: 20rpx;
   border-radius: @radius;
  .li-top{
   position: relative;
   padding: 0 14rpx;
   &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 8rpx;
    height: 36rpx;
    background: #0251FF;
   }
   & > view{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72rpx;
    font-weight: bold;
    border-bottom: 2rpx solid #BBBBBB;

   }
    .top-left{

    }
   .top-right{
    color: #0251FF;

   }
  }
   .li-mid{
    padding: 10rpx;
     .cel{
      padding: 12rpx;
      display: flex;
      .cel-key{
       font-size: 34rpx;
       color: #828282;
       //width: 138rpx;
       //flex-shrink: 0;
       padding-right: 10rpx;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
      }
      .cel-val{
       color: #000;
       font-size: 34rpx;
       flex: 1;
       text-align: right;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

       .img-wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96rpx;
        height: 100%;
        .img{
         width: 64rpx;
         height: 64rpx;
         margin: 0 14rpx;
        }
       }
      }
     }
   }
   .li-bot{
    display: flex;
    justify-content: flex-end;
    padding: 0 22rpx 20rpx;
    .m-btn{
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     width: 120rpx;
     height: 57rpx;
     background: #0251FF;
     border-radius: @radius;
     font-size: 25rpx;
     &+ .m-btn {
      margin-left: 10rpx;
     }
     &.m-btn1{
      background: #6F9EFF;
      &:active{
       background: #6888e2;
      }
     }
     &.m-btn2{
      background: #9A9A9A;
      &:active{
       background: #848484;
      }
     }
     &.m-btn3{
      &:active{
       background: #0248d5;
      }
     }
    }
   }
  }
 }
 .loading{
   display: flex;
   align-items: center;
   justify-content: center;
 }
  .empty{
    background: #ffffff;
    height: 100%;
  }
  .prompt-msg{
    text-align: center;
    color: #969799;
    font-size: 28rpx;
  }
}

.g-footer{
 position: sticky;
 bottom: 0;
 background: #ffffff;
 padding: 10rpx 20rpx 20rpx;
 font-size: 24rpx;
 font-weight: bold;
 display: flex;
 flex-wrap: wrap;
 .num{
  color: #0251FF;
  margin-left: 8rpx;
 }
 &>view + view{
  margin-left: 16rpx;
 }
}

.img_popup {
 display: flex;
 align-items: center;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background-color: rgba(0, 0, 0, 0) !important;

 >.popup_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  // max-height: 100%;
  height: 100%;
  // overflow: hidden;
  // background: rgb(255, 255, 255);

  >.img {
   width: 100%;
   height: 100%;
   // background: #fff;
  }

  >.icon {
   position: absolute;
   // left: 0;
   top: 50%;
   transform: translateY(-50%);
   border-radius: 50%;
   font-size: 80rpx;
   color: #fff;
   background: rgba(0, 0, 0, 0.4);

   &.left {
    left: 0;
   }

   &.right {
    right: 0;
   }
  }

  >.close {
   position: absolute;
   top: 12rpx;
   right: 12rpx;
   font-size: 48rpx;
   color: rgba(255, 255, 255, 0.85);
  }

  // >.bottom {
  //   position: absolute;
  //   left: 0;
  //   bottom: 0;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   width: 100%;
  //   height: 64rpx;
  //   padding-bottom: 24rpx;
  //   color: #fff;
  //   // background: rgba(0, 0, 0, 0.4);
  // }
  >.bottom {
   position: absolute;
   left: 50%;
   bottom: 36rpx;
   transform: translateX(-50%);
   padding: 10rpx 24rpx;
   border-radius: 56rpx;
   font-size: 26rpx;
   color: #fff;
   background: rgba(0, 0, 0, 0.4);
  }


  .btns-wrap{
   background: #fff;
   position: absolute;
   bottom: 0;
   width: 100%;
   padding: 50rpx 30rpx 30rpx;
   box-sizing: border-box;
   > .btn{
    width: 100%;
    height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38rpx;
    &.cancel{
     border-top: 2rpx solid #e6e6e6;
     font-size: 34rpx;
    }
   }
   > .close{
    position: absolute;
    top: 12rpx;
    right: 12rpx;
    font-size: 48rpx;
    color: #999999;
   }
  }

 }


}

